<!-- 闲置转让 -->
<template>
  <div class="yield">
    <myheader title="闲置转让" rightBtn="添加转让物品" @updataInfo="submitRecruit"></myheader>
    <!-- 搜索栏 -->
    <div class="serarch">
      <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" />
    </div>
    <ul v-if="!empty" class="yield_Ul">
      <!-- 购物车组件 -->
      <chart :chartLsit="yield">
        <template v-slot:btn1>
          <van-button size="mini">购买</van-button>
        </template>

        <template v-slot:btn2>
          <van-button size="mini">详情</van-button>
        </template>
      </chart>
    </ul>

    <van-empty v-else image="error" description="暂无此内容！" />

    <el-pagination
      background
      style="margin-top:1rem;"
      layout="total, prev, pager, next"
      v-if=" yield.length>0"
      @current-change="handleCurrentChange"
      :currentPage="currentPage"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import formatDateTime from '../../../utils/data'
import Chart from '../../../comon/chart.vue'
export default {
  components: {
    myheader,
    Chart,
  },
  data() {
    return {
      yield: [],
      currentPage: 1,
      pageSize: 5,
      pageCount: 0,
      total: 1,
      empty: false,
      searchValue: '',
    }
  },

  created() {
    this.init()
  },
  methods: {
    //价格格式化
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },
    async init() {
      const res = await this.$axios.get(
        '/goods/list?current=' + this.currentPage + '&size=' + this.pageSize
      )
      if (res.data.code == 200) {
        this.yield = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
      }
    },
    // 搜索
    async onSearch() {
      const res = await this.$axios.get('/goods/list?title=' + this.searchValue)
      if (res.data.code == 200) {
        this.yield = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.searchValue = ''
        if (res.data.data.total == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },
    // 添加遗失物品
    submitRecruit() {
      this.$router.push('/addYield')
    },

    // 分页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
  },
}
</script>

<style scoped>
.yield {
  margin-top: 46px;
  margin-bottom: 30px;
}
.yield_Ul {
  width: 95%;
}
.yield_Ul_li {
  padding-top: 20px;
  width: 50%;
  padding-left: 2%;
  padding-right: 2%;
}
.yield_Ul_li_date {
  font-size: 14px;
  color: #a1a1a1;
}

/* 东西的照片 */
.yield_Ul_li_yield {
  width: 100%;
}
.yield_Ul_li_yield_img {
  display: block;
  width: 100%;
  height: 160px;
}
.yield_Ul_li_yield_div {
  font-size: 16px;
}
/* 用户 */
.yield_Ul_li_user {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.yield_Ul_li_user > img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.yield_Ul_li_user > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
</style>
